<template>
	<view>
		<view class="img">
			<view class="registers">
				<view class="iconfont icon-zuo icon" @tap="$common.go1()"></view>
				用户注册
			</view>
			<view class="center">
				<view class="content">
					<view class="ipt" v-show="!isNext">
						<view class="ipt_name">
							<input type="text" v-model="form.mobile" placeholder="请输入手机号" />
						</view>
						<view class="ipt_pwd">
							<input type="text" v-model="form.code" placeholder="请输入验证码" />
							<view class="auth" v-show='!isCode' @click="send">获取验证码</view>
							<view class="auth" v-show="isCode">{{time}} s</view>
						</view>
					</view>
					
					<view class="ipt" v-show="isNext">
						<view class="ipt_name">
							<input type="text" v-model="form.pass" placeholder="请输入密码" />
						</view>
						<view class="ipt_pwd">
							<input type="text" v-model="form.repass" placeholder="再次输入密码" />
						</view>
					</view>
				</view>
			</view>
			<view class="radio">
				<checkbox-group>
					<label class="ck" @click="isgree = !isgree">
						<checkbox value="cb"/><text class="text_1">我已阅读并同意<text class="text_2">《用户使用协议》</text>和<text class="text_2">《隐私政策》</text></text>
					</label>
				</checkbox-group>
			</view>
			<view class="next" v-show="!isNext" @click="next">下一步</view>
			<view class="next" v-show="isNext" @click="submit">确定提交</view>
			<view class="box"></view>
		</view>
	</view>
</template>

<script>
	import Api from '@/api/index.js'
	import {regMobie,regCode,regPass} from '@/utils/verfy.js'
	export default {
		data() {
			return {
				isNext : false,
				form : {
					mobile : '15764070811'
				},
				time : 5,
				isCode : false,
				timer : '',
				isgree : false
			};
		},
		methods:{
			async send(){
				// 验证 非空 格式
				if(!regMobie(this.form.mobile)) return this.$message.error('请输入正确的手机号')
				let res = await Api.sendCode({mobile : this.form.mobile})
				console.log(res);
				this.$message.success('发送成功')
				// 开始定时器发送
				this.isCode = true
				this.timer = setInterval(()=>{
					this.time --
					if(this.time <= 0){
						this.isCode = false
						this.time = 5
						// 清楚定时器
						clearInterval(this.timer)
					}
				},1000)
			},
			async next(){
				if(!regMobie(this.form.mobile)) return this.$message.error('请输入正确的手机号')
				if(!regCode(this.form.code)) return this.$message.error('请输入正确的验证码')
				await Api.regByCode(this.form)
				// console.log(res);
				// 删除code 字段
				delete this.form.code
				this.isNext = true
			},
			async submit(){
				if(!regPass(this.form.pass)) return this.$message.error('密码至少大小写字母数字特殊字符各一位')
				if(this.form.pass!==this.form.repass) return this.$message.error('两次密码不一致')
				if(!this.isgree) return this.$message.error('请勾选协议')
				delete this.form.repass
				let res = await Api.reg(this.form)
				console.log(res);
				uni.setStorageSync('token',res.data.token)
				uni.setStorageSync('member',res.data.member)
				uni.setStorageSync('memberinof',res.data)
				this.$message.success('注册成功')
				this.$common.go('/pages/house/house')
			}
		},
		beforeDestroy(){
			// 清楚定时器 防止内存泄漏
			clearInterval(this.timer)
		}
	}
</script>

<style lang="less">
	@import url('register.less');
</style>